<template>
  <div class="settings-container">
    <el-card class="settings-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>系统设置</span>
        </div>
      </template>
      
      <el-tabs v-model="activeTab">
        <!-- 基本设置 -->
        <el-tab-pane label="基本设置" name="basic">
          <el-form :model="basicSettings" label-width="120px">
            <el-form-item label="系统名称">
              <el-input v-model="basicSettings.systemName" />
            </el-form-item>
            
            <el-form-item label="系统Logo">
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :auto-upload="false"
                :on-change="handleLogoChange"
              >
                <img v-if="basicSettings.logoUrl" :src="basicSettings.logoUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><i class="el-icon-plus"></i></el-icon>
              </el-upload>
            </el-form-item>
            
            <el-form-item label="系统描述">
              <el-input v-model="basicSettings.description" type="textarea" :rows="3" />
            </el-form-item>
            
            <el-form-item label="版权信息">
              <el-input v-model="basicSettings.copyright" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <!-- 界面设置 -->
        <el-tab-pane label="界面设置" name="interface">
          <el-form :model="interfaceSettings" label-width="120px">
            <el-form-item label="主题色">
              <el-color-picker v-model="interfaceSettings.primaryColor" />
            </el-form-item>
            
            <el-form-item label="主题模式">
              <el-radio-group v-model="interfaceSettings.theme">
                <el-radio label="light">浅色模式</el-radio>
                <el-radio label="dark">深色模式</el-radio>
              </el-radio-group>
            </el-form-item>
            
            <el-form-item label="菜单布局">
              <el-radio-group v-model="interfaceSettings.menuLayout">
                <el-radio label="sidebar">侧边菜单</el-radio>
                <el-radio label="top">顶部菜单</el-radio>
              </el-radio-group>
            </el-form-item>
            
            <el-form-item label="固定头部">
              <el-switch v-model="interfaceSettings.fixedHeader" />
            </el-form-item>
            
            <el-form-item label="标签页">
              <el-switch v-model="interfaceSettings.tagsView" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <!-- 通知设置 -->
        <el-tab-pane label="通知设置" name="notification">
          <el-form :model="notificationSettings" label-width="120px">
            <el-form-item label="系统通知">
              <el-switch v-model="notificationSettings.systemNotification" />
            </el-form-item>
            
            <el-form-item label="声音提醒">
              <el-switch v-model="notificationSettings.soundNotification" />
            </el-form-item>
            
            <el-form-item label="桌面通知">
              <el-switch v-model="notificationSettings.desktopNotification" />
            </el-form-item>
            
            <el-form-item label="通知显示时间">
              <el-slider v-model="notificationSettings.duration" :min="1" :max="10" :step="1" :format-tooltip="formatTooltip" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <!-- 安全设置 -->
        <el-tab-pane label="安全设置" name="security">
          <el-form :model="securitySettings" label-width="120px">
            <el-form-item label="自动锁屏">
              <el-switch v-model="securitySettings.autoLock" />
            </el-form-item>
            
            <el-form-item label="锁屏时间">
              <el-select v-model="securitySettings.lockTime" placeholder="请选择">
                <el-option label="5分钟" value="5" />
                <el-option label="10分钟" value="10" />
                <el-option label="30分钟" value="30" />
                <el-option label="1小时" value="60" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="修改密码">
              <el-button type="primary" @click="showChangePasswordDialog">修改密码</el-button>
            </el-form-item>
            
            <el-form-item label="登录日志">
              <el-button @click="showLoginLogs">查看登录日志</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <!-- 关于系统 -->
        <el-tab-pane label="关于系统" name="about">
          <div class="about-section">
            <div class="app-logo">
              <img src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif" alt="Logo" />
            </div>
            <h2>Electron Vue Admin</h2>
            <p class="version">版本: v1.0.0</p>
            <p class="description">
              基于Electron和Vue.js开发的现代化桌面应用程序，提供丰富的功能和优雅的用户界面。
            </p>
            <div class="about-info">
              <p><strong>开发者:</strong> Your Company Name</p>
              <p><strong>官网:</strong> <a href="#">https://www.example.com</a></p>
              <p><strong>支持邮箱:</strong> support@example.com</p>
            </div>
            <el-button type="primary" @click="checkForUpdates">检查更新</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
      
      <div class="settings-footer">
        <el-button type="primary" @click="saveSettings">保存设置</el-button>
        <el-button @click="resetSettings">重置</el-button>
      </div>
    </el-card>
    
    <!-- 修改密码对话框 -->
    <el-dialog title="修改密码" v-model="passwordDialogVisible" width="400px">
      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="100px">
        <el-form-item label="当前密码" prop="currentPassword">
          <el-input v-model="passwordForm.currentPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword" type="password" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="passwordDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="changePassword">确定</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 登录日志对话框 -->
    <el-dialog title="登录日志" v-model="loginLogsDialogVisible" width="700px">
      <el-table :data="loginLogs" style="width: 100%">
        <el-table-column prop="time" label="登录时间" width="180" />
        <el-table-column prop="ip" label="IP地址" width="150" />
        <el-table-column prop="location" label="登录地点" />
        <el-table-column prop="device" label="设备信息" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === '成功' ? 'success' : 'danger'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'Settings',
  setup() {
    // 当前激活的标签页
    const activeTab = ref('basic')
    
    // 基本设置
    const basicSettings = reactive({
      systemName: 'Electron Vue Admin',
      logoUrl: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
      description: '基于Electron和Vue.js开发的现代化桌面应用程序',
      copyright: '© 2025 Your Company Name'
    })
    
    // 界面设置
    const interfaceSettings = reactive({
      primaryColor: '#409EFF',
      theme: 'light',
      menuLayout: 'sidebar',
      fixedHeader: true,
      tagsView: true
    })
    
    // 通知设置
    const notificationSettings = reactive({
      systemNotification: true,
      soundNotification: true,
      desktopNotification: false,
      duration: 4
    })
    
    // 安全设置
    const securitySettings = reactive({
      autoLock: false,
      lockTime: '30'
    })
    
    // 修改密码对话框
    const passwordDialogVisible = ref(false)
    const passwordFormRef = ref(null)
    const passwordForm = reactive({
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    })
    const passwordRules = {
      currentPassword: [
        { required: true, message: '请输入当前密码', trigger: 'blur' }
      ],
      newPassword: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
      ],
      confirmPassword: [
        { required: true, message: '请确认新密码', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            if (value !== passwordForm.newPassword) {
              callback(new Error('两次输入的密码不一致'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }
      ]
    }
    
    // 登录日志对话框
    const loginLogsDialogVisible = ref(false)
    const loginLogs = ref([
      {
        time: '2025-09-18 09:23:12',
        ip: '192.168.1.100',
        location: '中国 广东 深圳',
        device: 'Chrome 95.0.4638.69 / Windows 10',
        status: '成功'
      },
      {
        time: '2025-09-17 18:05:43',
        ip: '192.168.1.100',
        location: '中国 广东 深圳',
        device: 'Chrome 95.0.4638.69 / Windows 10',
        status: '成功'
      },
      {
        time: '2025-09-16 10:12:35',
        ip: '192.168.1.100',
        location: '中国 广东 深圳',
        device: 'Chrome 95.0.4638.69 / Windows 10',
        status: '失败'
      },
      {
        time: '2025-09-16 10:11:22',
        ip: '192.168.1.100',
        location: '中国 广东 深圳',
        device: 'Chrome 95.0.4638.69 / Windows 10',
        status: '失败'
      },
      {
        time: '2025-09-15 14:30:01',
        ip: '192.168.1.100',
        location: '中国 广东 深圳',
        device: 'Chrome 95.0.4638.69 / Windows 10',
        status: '成功'
      }
    ])
    
    // 处理Logo上传
    const handleLogoChange = (file) => {
      const reader = new FileReader()
      reader.onload = (e) => {
        basicSettings.logoUrl = e.target.result
      }
      reader.readAsDataURL(file.raw)
    }
    
    // 格式化提示文本
    const formatTooltip = (val) => {
      return `${val} 秒`
    }
    
    // 显示修改密码对话框
    const showChangePasswordDialog = () => {
      passwordDialogVisible.value = true
      passwordForm.currentPassword = ''
      passwordForm.newPassword = ''
      passwordForm.confirmPassword = ''
    }
    
    // 修改密码
    const changePassword = () => {
      passwordFormRef.value?.validate((valid) => {
        if (valid) {
          // 模拟修改密码
          setTimeout(() => {
            ElMessage.success('密码修改成功')
            passwordDialogVisible.value = false
          }, 1000)
        }
      })
    }
    
    // 显示登录日志
    const showLoginLogs = () => {
      loginLogsDialogVisible.value = true
    }
    
    // 检查更新
    const checkForUpdates = () => {
      ElMessage.info('当前已是最新版本')
    }
    
    // 保存设置
    const saveSettings = () => {
      // 模拟保存设置
      setTimeout(() => {
        ElMessage.success('设置保存成功')
      }, 500)
    }
    
    // 重置设置
    const resetSettings = () => {
      // 重置为默认设置
      Object.assign(basicSettings, {
        systemName: 'Electron Vue Admin',
        logoUrl: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
        description: '基于Electron和Vue.js开发的现代化桌面应用程序',
        copyright: '© 2025 Your Company Name'
      })
      
      Object.assign(interfaceSettings, {
        primaryColor: '#409EFF',
        theme: 'light',
        menuLayout: 'sidebar',
        fixedHeader: true,
        tagsView: true
      })
      
      Object.assign(notificationSettings, {
        systemNotification: true,
        soundNotification: true,
        desktopNotification: false,
        duration: 4
      })
      
      Object.assign(securitySettings, {
        autoLock: false,
        lockTime: '30'
      })
      
      ElMessage.success('设置已重置')
    }
    
    onMounted(() => {
      // 可以在这里加载保存的设置
    })
    
    return {
      activeTab,
      basicSettings,
      interfaceSettings,
      notificationSettings,
      securitySettings,
      passwordDialogVisible,
      passwordFormRef,
      passwordForm,
      passwordRules,
      loginLogsDialogVisible,
      loginLogs,
      handleLogoChange,
      formatTooltip,
      showChangePasswordDialog,
      changePassword,
      showLoginLogs,
      checkForUpdates,
      saveSettings,
      resetSettings
    }
  }
}
</script>

<style scoped>
.settings-container {
  padding: 20px;
}

.settings-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.settings-footer {
  margin-top: 30px;
  text-align: center;
}

.avatar-uploader {
  display: flex;
  justify-content: center;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 4px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
}

.about-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.app-logo {
  margin-bottom: 20px;
}

.app-logo img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.version {
  color: #909399;
  margin-bottom: 20px;
}

.description {
  text-align: center;
  margin-bottom: 20px;
  max-width: 600px;
}

.about-info {
  margin-bottom: 20px;
  width: 100%;
  max-width: 400px;
}
</style>